<!DOCTYPE html>

<!--
Copyright 2017 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<html lang="en">

<head>

  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-33848682-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      window.dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'UA-33848682-1');
  </script>

  <meta charset="utf-8">
  <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript.">
  <meta name="author" content="//samdutton.com">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
  <meta itemprop="image" content="/images/icons/icon192.png">
  <meta id="theme-color" name="theme-color" content="#fff">

  <link rel="icon" href="/images/icons/icon192.png">

  <base target="_blank">

  <title>CSS-only menu</title>

  <link rel="stylesheet" href="../css/main.css">

  <style>
    menu a {
      display: block;
      line-height: 2em;
    }

    menu div {
      background-color: white;
      margin: 0;
      opacity: 0;
      padding: 20px 20px 10px 0;
      position: absolute;
      transition: visibility 0.5s;
      visibility: hidden;
      width: 60px;
      z-index: 1;
    }

    menu:focus div {
      opacity: 1;
      pointer-events: auto;
      visibility: visible;
    }

    menu {
      outline: none;
      position: relative;
      display: inline-block;
      padding: 0
    }

    menu:focus {
      pointer-events: none;
    }

    menu svg {
      height: 25px;
      cursor: pointer;
      width: 25px;
    }
    menu svg#close {
      display: none;
    }
    menu:focus svg#close {
      display: block;
    }
    menu:focus svg#open {
      display: none;
    }
  </style>

</head>

<body>

  <div id="container">

    <h1>
      <a href="../index.html" title="simpl.info home page">simpl.info</a> CSS-only menu</h1>

    <menu tabindex="0">
      <svg id="open">
        <title>Open menu</title>
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
      </svg>
      <svg id="close">
        <title>Close menu</title>
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
        <path d="M0 0h24v24H0z" fill="none" />
      </svg>
      <div>
        <a href="../index.html">About</a>
        <a href="../index.html">Contact</a>
        <a href="../index.html">FAQ</a>
        <a href="../index.html">Terms</a>
      </div>
    </menu>

    <p>Morbi porttitor posuere massa, nec facilisis eros malesuada a. Vestibulum pharetra vestibulum sapien non dapibus. Nam
      eu massa sit amet dolor mattis egestas id in ante. Praesent hendrerit diam ac leo consequat facilisis non ut ipsum.
      Integer consequat id ligula eget venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames
      ac turpis egestas. Cras bibendum arcu a pellentesque rhoncus. Nulla adipiscing porta velit, sit amet tempus ante. Etiam
      venenatis eros sagittis, volutpat nunc ac, dapibus erat.</p>

    <p>Aliquam suscipit, tellus a dictum eleifend, orci nibh egestas massa, sit amet feugiat mauris metus ut erat. Morbi consectetur
      gravida mauris vitae aliquam. Etiam tincidunt, turpis et bibendum pulvinar, mi nisl rhoncus tortor, quis varius arcu
      massa vitae elit. Phasellus id purus lorem. Vivamus luctus, ante at consequat dictum, purus lacus malesuada lectus,
      et iaculis lorem tortor rhoncus leo.</p>

    <p>Nulla imperdiet odio eros, consectetur sodales nulla tristique sit amet. Nunc blandit egestas massa a vestibulum. Maecenas
      eu mi sit amet ligula auctor hendrerit. Proin lobortis dictum cursus. Nam venenatis, tortor id suscipit molestie, metus
      ligula vehicula dui, sit amet sodales ligula tortor sit amet nunc. Nulla facilisi. In pharetra nisl vestibulum sollicitudin
      aliquam. Vivamus dolor nisl, convallis sed facilisis in, congue a dui. Ut mollis sapien faucibus turpis tempus varius.
      Donec congue quam ut fermentum dapibus.</p>

    <a href="https://github.com/samdutton/simpl/blob/gh-pages/csstransition" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>

  </div>

</body>

</html>